<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us - Movemaster Pro</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#A8DE13',
secondary: '#0F766E'
},
borderRadius: {
'none': '0px',
'sm': '4px',
DEFAULT: '8px',
'md': '12px',
'lg': '16px',
'xl': '20px',
'2xl': '24px',
'3xl': '32px',
'full': '9999px',
'button': '8px'
}
}
}
}
</script>
<style>
body {
background-color: #111827;
min-height: 1024px;
color: #E5E7EB;
}
.contact-hero {
background-image: url('./imgs/contact_banner.png');
background-size: cover;
background-position: center;
}
input::placeholder, textarea::placeholder {
color: #6B7280;
}
input:focus, textarea:focus {
outline: none;
border-color: #15B8A6;
}
.faq-item:not(:last-child) {
border-bottom: 1px solid #374151;
}
</style>
</head>
<body>
    <header class="fixed w-full bg-gray-800 shadow-sm z-50">
        <nav class="container mx-auto px-6 py-4">
        <div class="flex items-center justify-between">
        <div class="flex items-center">
        <a href="Home.html" class="text-2xl font-['Pacifico'] text-primary">
            <img style="width:197px;height:40px" src="./imgs/logo.png" alt="">
        </a>
        <div class="hidden md:flex items-center ml-16 space-x-8">
        <a href="Home.html" class="nav-link text-gray-300 hover:text-primary">Home</a>
        <a href="Products.html" class="nav-link text-gray-300 hover:text-primary">Products</a>
        <a href="Technology.html" class="nav-link text-gray-300 hover:text-primary">Technology</a>
        <a href="case.html" class="nav-link text-gray-300 hover:text-primary">Case Studies</a>
        </div>
        </div>
        <div class="flex items-center space-x-6">
            <a href="#">
                <button class="!rounded-button bg-primary text-black px-6 py-2 hover:bg-secondary transition-colors whitespace-nowrap">Contact Us</button>
            </a>
        </div>
        </div>
        </nav>
        </header>
<div class="mx-auto">
<div class="contact-hero relative h-[400px] flex items-center px-20">
<div class="absolute inset-0 bg-gradient-to-r from-gray-900/90 to-transparent"></div>
<div class="max-w-[600px] relative z-10">
<h1 class="text-5xl font-bold mb-6">Contact Us</h1>
<p class="text-xl text-gray-300">Get professional support and partnership opportunities to create the future of smart fitness together</p>
</div>
</div>
<div class="px-20 py-16">
<div class="bg-gray-800 p-12 rounded-lg mb-16">
<h2 class="text-2xl font-bold mb-8">Contact Form</h2>
<form class="grid grid-cols-2 gap-6">
<div>
<label class="block text-sm font-medium mb-2">Name</label>
<input type="text" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg" placeholder="Enter your name">
</div>
<div>
<label class="block text-sm font-medium mb-2">Phone</label>
<input type="tel" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg" placeholder="Enter your phone number">
</div>
<div class="col-span-2">
<label class="block text-sm font-medium mb-2">Email</label>
<input type="email" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg" placeholder="Enter your email address">
</div>
<div class="col-span-2">
<label class="block text-sm font-medium mb-2">Message</label>
<textarea class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg h-32" placeholder="Enter your message"></textarea>
</div>
<div class="col-span-2">
<button type="submit" class="bg-primary text-gray-900 px-8 py-3 !rounded-button whitespace-nowrap hover:bg-primary/90">Submit</button>
</div>
</form>
</div>
<div class="bg-gray-800 p-12 rounded-lg">
<h2 class="text-2xl font-bold mb-8">FAQ</h2>
<div class="space-y-6">
<div class="faq-item pb-6">
<h3 class="font-bold mb-2">Q: What's the battery life of Movemaster Pro smart insoles?</h3>
<p class="text-gray-400">Our smart insoles feature a low-power design, lasting about 7 days on a single charge to meet your daily needs.</p>
</div>
<div class="faq-item pb-6">
<h3 class="font-bold mb-2">Q: Are the insoles washable?</h3>
<p class="text-gray-400">Yes, the outer layer of the insoles is detachable and washable for easy cleaning.</p>
</div>
<div class="faq-item pb-6">
<h3 class="font-bold mb-2">Q: Which mobile operating systems are supported?</h3>
<p class="text-gray-400">We currently support iOS 10.0 and above, and Android 6.0 and above.</p>
</div>
<div class="faq-item">
<h3 class="font-bold mb-2">Q: How do you ensure data privacy and security?</h3>
<p class="text-gray-400">We use encrypted transmission and storage technologies, strictly adhering to privacy policies to ensure your data security.</p>
</div>
</div>
</div>
</div>
</div>
<footer class="bg-gray-900 text-white py-12">
    <div class="container mx-auto px-6">
    <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
    <div>
    <h3 class="text-xl font-bold mb-4">About Us</h3>
    <p class="text-gray-400">Movemaster Pro is committed to providing professional sports health solutions, enabling technology to support healthy living.</p>
    </div>
    <div>
    <h3 class="text-xl font-bold mb-4">Quick Links</h3>
    <ul class="space-y-2">
    <li><a href="Home.html" class="text-gray-400 hover:text-white">Home</a></li>
    <li><a href="Products.html" class="text-gray-400 hover:text-white">Products</a></li>
    <li><a href="Technology.html" class="text-gray-400 hover:text-white">Technical</a></li>
    <li><a href="#" class="text-gray-400 hover:text-white">Contact Us</a></li>
    </ul>
    </div>
    <div>
    <h3 class="text-xl font-bold mb-4">Contact Information</h3>
    <ul class="space-y-2">
    <li class="text-gray-400">Phone: 400-888-8888</li>
    <li class="text-gray-400">Email: support@movemaster.com</li>
    </ul>
    </div>
    <div>
    <h3 class="text-xl font-bold mb-4">Follow Us</h3>
    <div class="flex space-x-4">
    <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-primary transition-colors">
    <i class="fab fa-weixin text-white"></i>
    </a>
    <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-primary transition-colors">
    <i class="fab fa-weibo text-white"></i>
    </a>
    <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-primary transition-colors">
    <i class="fab fa-linkedin text-white"></i>
    </a>
    </div>
    </div>
    </div>
    <div class="border-t border-gray-800 mt-12 pt-8 text-center">
    <p class="text-gray-400">&copy; 2024 Movemaster Pro. All rights reserved.</p>
    </div>
    </div>
    </footer>
</body>
</html>
